<template>
	<view class="container">
		<view class="header">
			<text class="title">第{{questionIndex + 1}}题</text>
		</view>
		
		<scroll-view scroll-y="true" class="content">
			<!-- 题目类型选择 -->
			<view class="question-type-selector">
				<picker class="type-picker" :value="questionTypeIndex" :range="questionTypeOptions" @change="bindQuestionTypeChange">
					<view class="type-picker-value">
						{{ questionTypeOptions[questionTypeIndex] }} <text class="dropdown-icon">▼</text>
					</view>
				</picker>
				
				<view class="score-input-container">
					<view class="score-label-box">
						<text class="score-label">分值:</text>
					</view>
					<input class="score-input" type="number" v-model="currentQuestion.score" placeholder="分值" />
				</view>
			</view>
			
			<!-- 题目内容输入框 -->
			<view class="question-content-box">
				<textarea class="question-content-input" v-model="currentQuestion.title" placeholder="请输入题目内容" />
			</view>
			
			<!-- 试题媒体插入按钮 -->
			<view class="question-media-btns">
				<view class="media-btn" @click="chooseVideo">
					<text class="media-btn-icon">📹</text>
					<text class="media-btn-text">视频</text>
				</view>
				<view class="media-btn" @click="chooseQuestionImage">
					<text class="media-btn-icon">🖼️</text>
					<text class="media-btn-text">图片</text>
				</view>
			</view>
			
			<!-- 媒体预览区域 -->
			<view class="question-media-preview" v-if="currentQuestion.media_files && currentQuestion.media_files.length > 0">
				<view v-for="(media, index) in currentQuestion.media_files" :key="index" class="media-item">
					<!-- 图片预览 -->
					<image v-if="media.type === 'image'" class="preview-image" :src="media.url" mode="aspectFit"></image>
					
					<!-- 视频预览 -->
					<video v-if="media.type === 'video'" 
						   class="preview-video" 
						   :src="media.url" 
						   controls
						   object-fit="contain"
						   show-fullscreen-btn="true"
						   enable-play-gesture="true"
						   show-play-btn="true"
						   initial-time="0"
						   @error="handleVideoError"></video>
					
					<!-- 删除按钮 -->
					<view class="media-delete-btn" @click="deleteMedia(index)">
						<text class="media-delete-icon">×</text>
					</view>
				</view>
			</view>
			
			<!-- 选项区域 -->
			<view class="options-area" v-if="currentQuestion.type !== 'judge'">
				<view class="option-edit-item" v-for="(option, index) in currentQuestion.options" :key="index">
					<view class="option-left">
						<view class="correct-marker" @click="selectCorrectOption(index)">
							<view class="correct-circle" :class="{'correct-selected': currentQuestion.type === 'single' ? currentQuestion.correct_option === index : currentQuestion.correct_options.includes(index)}"></view>
						</view>
						<text class="option-letter">{{String.fromCharCode(65 + index)}}:</text>
					</view>
					<view class="option-middle">
						<input class="option-content-input" type="text" v-model="option.content" :placeholder="`选项内容`" />
					</view>
					<view class="option-right">
						<text class="option-delete" @click="removeOption(index)" v-if="currentQuestion.options.length > 2">－</text>
					</view>
				</view>
				
				<!-- 添加选项按钮 -->
				<view class="add-option-btn" @click="addOption" v-if="currentQuestion.options.length < 10">
					<text class="add-option-text">+ 添加选项</text>
				</view>
			</view>
			
			<!-- 判断题的选择 -->
			<view class="form-item" v-if="currentQuestion.type === 'judge'">
				<text class="form-label required bold-label">正确答案</text>
				<view class="judge-options">
					<view class="judge-option-item" @click="currentQuestion.correct_option = true">
						<radio :checked="currentQuestion.correct_option === true" color="#007F4F" />
						<text class="judge-option-text">正确</text>
					</view>
					<view class="judge-option-item" @click="currentQuestion.correct_option = false">
						<radio :checked="currentQuestion.correct_option === false" color="#007F4F" />
						<text class="judge-option-text">错误</text>
					</view>
				</view>
			</view>
			
			<!-- 解析部分 -->
			<view class="form-item">
				<text class="form-label bold-label">解析</text>
				<view class="textarea-container highlighted-container">
					<textarea class="form-textarea" v-model="currentQuestion.explanation" placeholder="请输入答案解析（可选）" />
				</view>
			</view>
			
			<!-- 题目序号列表 -->
			<view class="question-numbers-container-inline">
				<view class="question-numbers-title">已添加题目: <text class="drag-hint">长按序号可拖动调整顺序</text></view>
				<scroll-view scroll-x="true" class="question-numbers-scroll">
					<view class="question-numbers">
						<view 
							v-for="(question, index) in questions" 
							:key="index" 
							:class="['question-number', questionIndex === index ? 'question-number-active' : '', dragIndex === index ? 'dragging' : '']"
							@click="switchQuestion(index)"
							@longpress="startDrag(index)"
							@touchmove.stop.prevent="onDrag"
							@touchend="endDrag"
							:data-index="index"
						>
							{{ index + 1 }}
							<view v-if="dragIndex === index" class="dragging-indicator"></view>
						</view>
						<view class="question-number question-number-add" @click="addNewQuestion">
							+
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 保存按钮 -->
			<view class="footer">
				<view class="btn-row">
					<view class="confirm-btn full-width" @click="saveAndExit"><text>保存并退出</text></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				examId: '', // 考试ID
				questionIndex: 0, // 当前题目索引
				questions: [], // 所有题目
				isEdit: false, // 是否是编辑模式
				questionTypeIndex: 0,
				questionTypeOptions: ['单选题', '多选题', '判断题'],
				currentQuestion: {
					title: '',
					type: 'single',
					options: [
						{ content: '' },
						{ content: '' },
						{ content: '' },
						{ content: '' }
					],
					correct_option: 0,
					correct_options: [],
					explanation: '',
					score: 5,
					media_files: []
				},
				tempOptions: [],
				dragIndex: -1, // 当前拖拽的题目索引
				targetIndex: -1, // 拖拽目标位置索引
				dragStartX: 0, // 拖拽开始的X坐标
				dragStartY: 0, // 拖拽开始的Y坐标
				isDragging: false, // 是否正在拖拽
			}
		},
		onLoad(options) {
			// 获取参数
			if (options) {
				// 获取考试ID
				if (options.examId) {
					this.examId = options.examId;
				}
				
				// 获取题目数据
				const questionsStr = uni.getStorageSync('edit_questions');
				if (questionsStr) {
					try {
						this.questions = JSON.parse(questionsStr);
					} catch (e) {
						console.error('解析题目数据失败', e);
						this.questions = [];
					}
				}
				
				// 获取当前编辑的题目索引
				if (options.index !== undefined && options.index !== null) {
					const index = parseInt(options.index);
					this.questionIndex = index;
					
					// 如果是编辑已有题目
					if (index >= 0 && index < this.questions.length) {
						this.isEdit = true;
						const question = this.questions[index];
						this.currentQuestion = JSON.parse(JSON.stringify(question));
						
						// 确保media_files字段存在
						if (!this.currentQuestion.media_files) {
							if (this.currentQuestion.media && Array.isArray(this.currentQuestion.media)) {
								this.currentQuestion.media_files = this.currentQuestion.media;
								delete this.currentQuestion.media;
							} else {
								this.currentQuestion.media_files = [];
							}
						}
						
						// 设置题目类型索引
						if (question.type === 'single') {
							this.questionTypeIndex = 0;
						} else if (question.type === 'multiple') {
							this.questionTypeIndex = 1;
						} else {
							this.questionTypeIndex = 2;
						}
					}
				}
			}
		},
		methods: {
			// 题目类型变化
			bindQuestionTypeChange(e) {
				this.questionTypeIndex = e.detail.value;
				const types = ['single', 'multiple', 'judge'];
				const newType = types[this.questionTypeIndex];
				
				// 如果切换到判断题
				if (newType === 'judge') {
					// 保存原来的选项，以便切换回来
					this.tempOptions = JSON.parse(JSON.stringify(this.currentQuestion.options));
					// 设置判断题特有的属性
					this.currentQuestion.options = [];
					this.currentQuestion.correct_option = true; // 默认为"正确"
				} 
				// 如果从判断题切换到其他题型
				else if (this.currentQuestion.type === 'judge') {
					// 恢复原来的选项
					this.currentQuestion.options = this.tempOptions || [
						{ content: '' },
						{ content: '' },
						{ content: '' },
						{ content: '' }
					];
					
					if (newType === 'single') {
						this.currentQuestion.correct_option = 0;
					} else {
						this.currentQuestion.correct_options = [];
					}
				}
				// 在单选和多选之间切换
				else if (newType === 'multiple' && this.currentQuestion.type === 'single') {
					// 将单选答案转换为多选答案数组
					this.currentQuestion.correct_options = [this.currentQuestion.correct_option];
				} else if (newType === 'single' && this.currentQuestion.type === 'multiple') {
					// 将多选答案转换为单选答案
					this.currentQuestion.correct_option = this.currentQuestion.correct_options.length > 0 ? this.currentQuestion.correct_options[0] : 0;
				}
				
				this.currentQuestion.type = newType;
			},
			
			// 选择题目图片
			chooseQuestionImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.uploadQuestionMedia(res.tempFilePaths[0], 'image');
					}
				});
			},
			
			// 选择题目视频
			chooseVideo() {
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					camera: 'back',
					compressed: true, // 尝试使用压缩版本
					success: (res) => {
						console.log('选择视频成功:', res);
						// 检查文件大小
						if (res.size > 20 * 1024 * 1024) { // 20MB限制
							uni.showToast({
								title: '视频过大，请选择小于20MB的视频',
								icon: 'none',
								duration: 3000
							});
							return;
						}
						console.log('准备上传视频，大小:', (res.size/1024/1024).toFixed(2) + 'MB');
						this.uploadQuestionMedia(res.tempFilePath, 'video');
					},
					fail: (err) => {
						console.error('选择视频失败:', err);
					}
				});
			},
			
			// 上传题目媒体
			uploadQuestionMedia(filePath, mediaType) {
				if (!filePath) {
					this.showToast('文件路径无效');
					return;
				}
				
				// 对于视频，检查文件后缀
				if (mediaType === 'video') {
					const fileExt = filePath.split('.').pop().toLowerCase();
					console.log('视频文件格式:', fileExt);
					
					// 检查是否是常见的受支持格式
					const supportedFormats = ['mp4', 'mov', '3gp', 'avi'];
					if (!supportedFormats.includes(fileExt)) {
						uni.showModal({
							title: '格式可能不兼容',
							content: '建议使用MP4格式(H.264编码)，当前格式可能无法正常播放',
							confirmText: '继续上传',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									this.proceedWithUpload(filePath, mediaType);
								}
							}
						});
						return;
					}
				}
				
				this.proceedWithUpload(filePath, mediaType);
			},
			
			// 执行上传过程
			proceedWithUpload(filePath, mediaType) {
				uni.showLoading({ title: '媒体上传中...' });
				
				const extension = mediaType === 'image' ? 'jpg' : 'mp4';
				const cloudPath = `exams/questions/${new Date().getTime()}_${Math.random().toString(36).substring(2)}.${extension}`;
				
				console.log('开始上传媒体文件:', {
					filePath,
					mediaType,
					cloudPath
				});
				
				uniCloud.uploadFile({
					filePath: filePath,
					cloudPath: cloudPath,
					success: (res) => {
						console.log('上传成功:', res);
						// 添加到当前题目的媒体列表
						if (!this.currentQuestion.media_files) {
							this.currentQuestion.media_files = [];
						}
						
						this.currentQuestion.media_files.push({
							type: mediaType,
							url: res.fileID,
							name: filePath.split('/').pop(),
							size: 0
						});
						
						this.showToast('上传成功');
					},
					fail: (err) => {
						console.error('媒体上传失败', err);
						this.showToast('上传失败，请重试');
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			
			// 删除媒体
			deleteMedia(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除该媒体文件吗？',
					success: (res) => {
						if (res.confirm) {
							// 删除指定索引的媒体文件
							this.currentQuestion.media_files.splice(index, 1);
							this.showToast('删除成功');
						}
					}
				});
			},
			
			// 添加选项
			addOption() {
				if (this.currentQuestion.options.length < 10) {
					this.currentQuestion.options.push({ content: '' });
				} else {
					this.showToast('最多只能添加10个选项');
				}
			},
			
			// 删除选项
			removeOption(index) {
				if (this.currentQuestion.options.length > 2) {
					this.currentQuestion.options.splice(index, 1);
					
					// 更新正确答案
					if (this.currentQuestion.type === 'single' && this.currentQuestion.correct_option >= this.currentQuestion.options.length) {
						this.currentQuestion.correct_option = 0;
					}
					
					if (this.currentQuestion.type === 'multiple') {
						this.currentQuestion.correct_options = this.currentQuestion.correct_options.filter(i => i < this.currentQuestion.options.length);
					}
				} else {
					this.showToast('至少需要保留2个选项');
				}
			},
			
			// 选择正确选项
			selectCorrectOption(index) {
				if (this.currentQuestion.type === 'single') {
					// 单选题
					this.currentQuestion.correct_option = index;
				} else if (this.currentQuestion.type === 'multiple') {
					// 多选题
					const position = this.currentQuestion.correct_options.indexOf(index);
					if (position === -1) {
						// 不存在，添加
						this.currentQuestion.correct_options.push(index);
					} else {
						// 已存在，移除
						this.currentQuestion.correct_options.splice(position, 1);
					}
				}
			},
			
			// 添加新题目
			addNewQuestion() {
				// 自动保存当前题目
				if (this.currentQuestion.title.trim()) {
					if(this.saveCurrentQuestion()) {
						// 保存成功后重置题目
						this.resetCurrentQuestion();
					}
				} else {
					this.resetCurrentQuestion();
				}
			},
			
			// 保存当前题目
			saveCurrentQuestion() {
				// 验证题目
				if (!this.currentQuestion.title.trim()) {
					this.showToast('请输入题目内容');
					return false;
				}
				
				if (this.currentQuestion.type !== 'judge') {
					// 检查选项
					const emptyOptionIndex = this.currentQuestion.options.findIndex(opt => !opt.content.trim());
					if (emptyOptionIndex !== -1) {
						this.showToast(`选项${String.fromCharCode(65 + emptyOptionIndex)}不能为空`);
						return false;
					}
					
					// 检查正确答案
					if (this.currentQuestion.type === 'multiple' && this.currentQuestion.correct_options.length === 0) {
						this.showToast('请至少选择一个正确选项');
						return false;
					}
				}
				
				// 保存题目
				const questionCopy = JSON.parse(JSON.stringify(this.currentQuestion));
				
				// 确保使用统一的media_files字段，移除旧的media字段
				if (questionCopy.media && !questionCopy.media_files) {
					questionCopy.media_files = questionCopy.media;
					delete questionCopy.media;
				}
				
				// 更新或添加题目
				if (this.isEdit) {
					this.questions[this.questionIndex] = questionCopy;
				} else {
					this.questions.push(questionCopy);
				}
				
				// 保存到本地存储
				uni.setStorageSync('edit_questions', JSON.stringify(this.questions));
				
				return true;
			},
			
			// 替换原saveQuestion方法为saveAndExit
			saveAndExit() {
				// 先保存当前题目
				if (this.currentQuestion.title.trim()) {
					if (!this.saveCurrentQuestion()) {
						return; // 如果保存失败，不退出
					}
				}
				
				this.showToast('保存成功');
				
				// 延迟返回上一页
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			},
			
			// 切换到另一个题目
			switchQuestion(index) {
				// 先保存当前题目
				if (this.currentQuestion.title.trim()) {
					if(this.saveCurrentQuestion()) {
						this.loadQuestion(index);
					}
				} else {
					this.loadQuestion(index);
				}
			},
			
			// 加载指定题目
			loadQuestion(index) {
				if (index >= 0 && index < this.questions.length) {
					const question = this.questions[index];
					this.questionIndex = index;
					this.isEdit = true;
					
					// 复制题目信息到currentQuestion
					this.currentQuestion = JSON.parse(JSON.stringify(question));
					
					// 确保media_files字段存在
					if (!this.currentQuestion.media_files) {
						if (this.currentQuestion.media && Array.isArray(this.currentQuestion.media)) {
							this.currentQuestion.media_files = this.currentQuestion.media;
							delete this.currentQuestion.media;
						} else {
							this.currentQuestion.media_files = [];
						}
					}
					
					// 设置题目类型索引
					if (question.type === 'single') {
						this.questionTypeIndex = 0;
					} else if (question.type === 'multiple') {
						this.questionTypeIndex = 1;
					} else {
						this.questionTypeIndex = 2;
					}
				}
			},
			
			// 重置当前编辑的题目
			resetCurrentQuestion() {
				// 注意：新题目会是第 this.questions.length 题（即数组长度）
				this.questionIndex = this.questions.length;
				this.isEdit = false;
				this.currentQuestion = {
					title: '',
					type: 'single',
					options: [
						{ content: '' },
						{ content: '' },
						{ content: '' },
						{ content: '' }
					],
					correct_option: 0,
					correct_options: [],
					explanation: '',
					score: 5,
					media_files: []
				};
				this.questionTypeIndex = 0;
			},
			
			// 显示提示消息
			showToast(message) {
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
			},
			
			// 开始拖拽
			startDrag(index) {
				if (this.questions.length <= 1) return; // 只有一道题目时不需要拖拽
				
				this.dragIndex = index;
				this.targetIndex = index;
				this.isDragging = true;
				
				// 添加震动反馈（轻微）
				uni.vibrateShort();
				
				// 显示拖拽提示
				uni.showToast({
					title: '开始拖拽题目',
					icon: 'none',
					duration: 1000
				});
			},
			
			// 拖拽中
			onDrag(e) {
				if (!this.isDragging || this.dragIndex === -1) return;
				
				const touch = e.touches[0];
				const x = touch.clientX;
				const y = touch.clientY;
				
				// 计算目标位置
				this.calculateDragTarget(x, y);
			},
			
			// 计算拖拽目标位置
			calculateDragTarget(x, y) {
				// 使用uni.createSelectorQuery获取所有题目序号元素
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.question-number').boundingClientRect(rects => {
					if (!rects || !rects.length) return;
					
					// 排除"+"按钮
					const numberRects = rects.filter((rect, index) => index < this.questions.length);
					
					// 找到最接近触摸点的序号元素
					let minDistance = Number.MAX_VALUE;
					let closestIndex = -1;
					
					numberRects.forEach((rect, index) => {
						// 计算触摸点到序号中心的距离
						const centerX = rect.left + rect.width / 2;
						const centerY = rect.top + rect.height / 2;
						const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
						
						if (distance < minDistance) {
							minDistance = distance;
							closestIndex = index;
						}
					});
					
					// 更新目标索引
					if (closestIndex !== -1 && closestIndex !== this.dragIndex) {
						this.targetIndex = closestIndex;
					}
				}).exec();
			},
			
			// 结束拖拽
			endDrag() {
				if (!this.isDragging || this.dragIndex === -1 || this.targetIndex === -1 || this.dragIndex === this.targetIndex) {
					this.dragIndex = -1;
					this.targetIndex = -1;
					this.isDragging = false;
					return;
				}
				
				// 移动题目
				const question = this.questions.splice(this.dragIndex, 1)[0];
				this.questions.splice(this.targetIndex, 0, question);
				
				// 如果当前正在编辑的题目被移动，更新questionIndex
				if (this.questionIndex === this.dragIndex) {
					this.questionIndex = this.targetIndex;
				} else if (
					(this.questionIndex > this.dragIndex && this.questionIndex <= this.targetIndex) ||
					(this.questionIndex < this.dragIndex && this.questionIndex >= this.targetIndex)
				) {
					// 处理中间位置的索引变化
					this.questionIndex = this.questionIndex + (this.dragIndex < this.targetIndex ? -1 : 1);
				}
				
				// 保存调整后的顺序
				uni.setStorageSync('edit_questions', JSON.stringify(this.questions));
				
				// 显示成功提示
				uni.showToast({
					title: '题目顺序已调整',
					icon: 'success',
					duration: 1000
				});
				
				// 重置拖拽状态
				this.dragIndex = -1;
				this.targetIndex = -1;
				this.isDragging = false;
			},
			
			// 添加视频错误处理方法
			handleVideoError(e) {
				console.error('视频加载错误:', e.detail);
				uni.showToast({
					title: '视频加载失败，请检查格式或大小',
					icon: 'none',
					duration: 3000
				});
			},
			
			// 格式化题目数据
			formatQuestionData() {
				// 基础数据
				const formattedQuestion = {
					title: this.currentQuestion.title.trim(),
					type: this.currentQuestion.type,
					explanation: this.currentQuestion.explanation.trim(),
					score: Number(this.currentQuestion.score) || 5,
					media_files: this.currentQuestion.media_files || []
				};
				
				// 根据题目类型处理选项和答案
				if (this.currentQuestion.type === 'single') {
					// 单选题：使用0-based索引
					formattedQuestion.options = this.currentQuestion.options.map(opt => ({
						content: opt.content.trim()
					}));
					formattedQuestion.correct_option = Number(this.currentQuestion.correct_option);
					formattedQuestion.correct_options = [];
				} else if (this.currentQuestion.type === 'multiple') {
					// 多选题：使用0-based索引数组
					formattedQuestion.options = this.currentQuestion.options.map(opt => ({
						content: opt.content.trim()
					}));
					formattedQuestion.correct_options = this.currentQuestion.correct_options.map(Number);
					delete formattedQuestion.correct_option;
				} else if (this.currentQuestion.type === 'judge') {
					// 判断题：使用布尔值
					formattedQuestion.options = [];
					formattedQuestion.correct_option = Boolean(this.currentQuestion.correct_option);
					formattedQuestion.correct_options = [];
				}
				
				return formattedQuestion;
			},
			
			// 保存题目
			async saveQuestion() {
				try {
					// 基本验证
					if (!this.currentQuestion.title.trim()) {
						return this.showToast('请输入题目内容');
					}
					
					if (this.currentQuestion.type === 'single' || this.currentQuestion.type === 'multiple') {
						// 选项验证
						if (!this.currentQuestion.options || this.currentQuestion.options.length < 2) {
							return this.showToast('请至少添加两个选项');
						}
						
						// 验证选项内容
						for (let i = 0; i < this.currentQuestion.options.length; i++) {
							if (!this.currentQuestion.options[i].content.trim()) {
								return this.showToast(`请输入选项${String.fromCharCode(65 + i)}的内容`);
							}
						}
						
						// 验证正确答案
						if (this.currentQuestion.type === 'single' && this.currentQuestion.correct_option === undefined) {
							return this.showToast('请选择正确答案');
						}
						if (this.currentQuestion.type === 'multiple' && (!this.currentQuestion.correct_options || this.currentQuestion.correct_options.length === 0)) {
							return this.showToast('请选择正确答案');
						}
					}
					
					// 格式化题目数据
					const formattedQuestion = this.formatQuestionData();
					
					// 获取已有的题目列表
					let questions = [];
					try {
						const questionsStr = uni.getStorageSync('edit_questions');
						if (questionsStr) {
							questions = JSON.parse(questionsStr);
						}
					} catch (e) {
						console.error('获取题目列表失败:', e);
					}
					
					// 更新或添加题目
					if (this.isEdit) {
						// 更新现有题目
						questions[this.questionIndex] = formattedQuestion;
					} else {
						// 添加新题目
						questions.push(formattedQuestion);
					}
					
					// 保存更新后的题目列表
					uni.setStorageSync('edit_questions', JSON.stringify(questions));
					
					// 显示成功提示
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						duration: 2000
					});
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} catch (error) {
					console.error('保存题目失败:', error);
					this.showToast('保存失败，请重试');
				}
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF; /* Fallback background */
	}
	
	.header {
		display: flex;
		justify-content: center; /* 改为 center 使标题居中 */
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: calc(env(safe-area-inset-top) + 85rpx); /* 微调：进一步增加顶部内边距 */
		padding-bottom: 25rpx; /* 微调：略微减少底部内边距 */
		width: 100%;
		box-sizing: border-box;
		background-color: #1BAE76;
		color: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	
	.content {
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx; /* Space below header */
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); /* Original bottom padding + safe area */
		background-color: #f8f8f8; /* Light grey background for content area */
	}
	
	/* Card-like styling for sections */
	.question-type-selector,
	.question-content-box,
	.question-media-btns,
	.question-media-preview,
	.options-area,
	.form-item, /* This class is used for judge options and explanation */
	.question-numbers-container-inline,
	.footer {
		background-color: #FFFFFF;
		padding: 25rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 30rpx;
	}

	.footer {
		margin-top: 20rpx; /* Footer specific margin */
		border-top: none; /* Remove duplicate border if any from original */
	}
	
	/* Adjust specific paddings if default card padding is too much/little */
	.question-media-btns {
		display: flex; /* This was in original, ensure it remains */
	}

	.form-item .form-label { /* Ensure label within card has space */
		margin-bottom: 15rpx;
	}

	.textarea-container {
		background-color: #F8F8F8; /* Keep distinct background for textarea container */
		border-radius: 8rpx;
		padding: 20rpx;
		/* box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; */
	}
	
	.highlighted-container {
		border: 1rpx solid #e0e0e0; /* Lighter border */
		background-color: #fcfcfc;
	}

	/* 题目类型选择器 - specific adjustments if needed */
	.question-type-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.type-picker-value {
		display: flex;
		align-items: center;
		background-color: #E1F6F0;
		color: #007F4F;
		font-size: 32rpx;
		padding: 12rpx 30rpx;
		border-radius: 10rpx;
		font-weight: bold;
	}
	
	.dropdown-icon {
		margin-left: 10rpx;
		font-size: 24rpx;
	}
	
	/* 分值编辑区 */
	.score-input-container {
		display: flex;
		align-items: center;
	}
	
	.score-label-box {
		background-color: #E1F6F0;
		padding: 12rpx 20rpx;
		border-radius: 10rpx 0 0 10rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		min-width: 100rpx;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.score-label {
		font-size: 32rpx;
		color: #007F4F;
		font-weight: bold;
		white-space: nowrap;
		line-height: 1;
	}
	
	.score-input {
		box-sizing: border-box;
		width: 120rpx;
		height: 70rpx;
		color: #333333;
		font-size: 30rpx;
		text-align: center;
		background-color: #FFFFFF;
		border: 1rpx solid #DDDDDD;
		border-radius: 0 10rpx 10rpx 0;
	}
	
	/* 题目内容输入框 */
	.question-content-input {
		width: 100%;
		height: 200rpx;
		font-size: 32rpx;
		color: #333333;
	}
	
	/* 媒体插入按钮 */
	.media-btn {
		width: 140rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #F8F8F8;
		border: 1rpx solid #EEEEEE;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}
	.media-btn:last-child {
		margin-right: 0;
	}
	
	.media-btn-icon {
		font-size: 36rpx;
		color: #333333;
	}
	
	.media-btn-text {
		font-size: 24rpx;
		color: #666666;
		margin-top: 8rpx;
	}
	
	/* 媒体预览区域 */
	.media-item {
		position: relative;
		margin-bottom: 20rpx;
		border: 1rpx solid #EEEEEE;
		border-radius: 8rpx;
		overflow: hidden;
	}
	.media-item:last-child {
		margin-bottom: 0;
	}
	
	.preview-image {
		width: 100%;
		height: 300rpx;
		display: block;
	}
	
	.preview-video {
		width: 100%;
		height: 400rpx;
	}
	
	.media-delete-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.media-delete-icon {
		color: #FFFFFF;
		font-size: 36rpx;
	}
	
	/* 选项区域 */
	.option-edit-item {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.option-edit-item:last-child {
		border-bottom: none;
	}
	
	.option-left {
		display: flex;
		align-items: center;
		width: 120rpx;
	}
	
	.correct-marker {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #CCCCCC;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}
	
	.correct-circle {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: transparent;
	}
	
	.correct-selected {
		background-color: #007F4F;
	}
	
	.option-letter {
		font-size: 32rpx;
		color: #333333;
	}
	
	.option-middle {
		flex: 1;
		padding-right: 20rpx;
	}
	
	.option-content-input {
		width: 100%;
		height: 70rpx;
		font-size: 30rpx;
		color: #333333;
		background-color: #F8F8F8;
		border-radius: 8rpx;
		padding: 0 20rpx;
	}
	
	.option-right {
		width: 80rpx;
		display: flex;
		justify-content: center;
	}
	
	.option-delete {
		font-size: 36rpx;
		color: #FF5151;
		padding: 10rpx;
	}
	
	.add-option-btn {
		margin-top: 20rpx;
		padding: 16rpx 0;
		text-align: center;
		background-color: #F0F9F5; /* Lighter green accent */
		border-radius: 8rpx;
		border: 1rpx dashed #007F4F;
	}
	
	.add-option-text {
		font-size: 30rpx;
		color: #007F4F;
		font-weight: bold;
	}
	
	/* 判断题选项 & 解析 */
	.form-item .form-label {
		font-size: 28rpx;
		color: #333333;
		display: block;
		/* width: 100%; */ /* Already block */
		box-sizing: border-box;
	}
	
	.required:after {
		content: ' *';
		color: #FF0000;
	}
	
	.bold-label {
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.judge-options {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.judge-option-item {
		display: flex;
		align-items: center;
		margin-right: 60rpx;
	}
	.judge-option-item:last-child {
		margin-right: 0;
	}
	
	.judge-option-text {
		font-size: 28rpx;
		color: #333333;
		margin-left: 10rpx;
	}
	
	.form-textarea {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		color: #333333;
	}
	
	/* 题目序号列表 */
	.question-numbers-container-inline {
		border-top: 1rpx solid #eee; /* Keep top border for separation within card if needed */
	}
	
	.question-numbers-title {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx; /* Increased margin */
		padding-left: 0; /* Remove specific padding if card has it */
		font-weight: bold;
	}
	
	.question-numbers-scroll {
		white-space: nowrap;
	}
	
	.question-numbers {
		display: inline-flex;
		align-items: center;
	}
	
	.question-number {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666666;
		border-radius: 30rpx;
		margin-right: 15rpx;
		background-color: #fff;
		border: 1rpx solid #ddd;
		transition: all 0.2s ease; /* 添加平滑过渡效果 */
	}
	
	.question-number-active {
		background-color: #007F4F;
		color: #FFFFFF;
		border: none;
	}
	
	.question-number-add {
		background-color: #F0F9F5; /* Lighter green accent */
		color: #007F4F;
		border: 1rpx dashed #007F4F;
		font-weight: bold;
	}
	
	/* 底部保存区域 */
	.btn-row {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}
	
	.cancel-btn, .confirm-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		flex: 1; /* Make buttons share space */
		border-radius: 40rpx;
		font-size: 32rpx;
		margin: 0 10rpx; /* Add margin between buttons */
	}
	
	.full-width {
		width: 100%;
		margin: 0;
	}
	
	.confirm-btn {
		background-color: #007F4F;
		color: #FFFFFF;
	}
	
	/* 拖拽相关样式 */
	.drag-hint {
		font-size: 24rpx;
		color: #999;
		font-weight: normal;
		margin-left: 10rpx;
	}
	
	.dragging-indicator {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		width: 14rpx;
		height: 14rpx;
		background-color: #FF5151;
		border-radius: 50%;
		animation: pulse 1s infinite; /* 添加脉动动画 */
	}
	
	.question-number.dragging {
		opacity: 0.8;
		transform: scale(1.1);  /* 轻微放大效果 */
		z-index: 10;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
	}
	
	/* 添加简单动画关键帧 */
	@keyframes pulse {
		0% { opacity: 0.6; }
		50% { opacity: 1; }
		100% { opacity: 0.6; }
	}
</style> 